<template>
  <div class="account-container">
    <el-card class="profile-card">
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
        </div>
      </template>
      
      <div class="profile-content">
        <div class="avatar-container">
          <el-avatar :size="100" :src="userInfo.avatar" />
          <div class="upload-btn">
            <el-button type="primary" size="small" plain>更换头像</el-button>
          </div>
        </div>
        
        <el-form :model="userInfo" label-width="80px" class="profile-form">
          <el-form-item label="用户名">
            <el-input v-model="userInfo.username" />
          </el-form-item>
          
          <el-form-item label="邮箱">
            <el-input v-model="userInfo.email" />
          </el-form-item>
          
          <el-form-item label="手机号">
            <el-input v-model="userInfo.phone" />
          </el-form-item>
          
          <el-form-item label="角色">
            <el-tag type="info">{{ userInfo.role }}</el-tag>
          </el-form-item>
          
          <el-form-item label="注册时间">
            <span>{{ userInfo.registerTime }}</span>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="saveProfile">保存修改</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    
    <el-card class="security-card">
      <template #header>
        <div class="card-header">
          <span>安全设置</span>
        </div>
      </template>
      
      <div class="security-item">
        <div class="security-info">
          <div class="security-title">账户密码</div>
          <div class="security-desc">当前密码强度：强</div>
        </div>
        <el-button type="text">修改</el-button>
      </div>
      
      <div class="security-item">
        <div class="security-info">
          <div class="security-title">绑定手机</div>
          <div class="security-desc">已绑定手机：{{ userInfo.phone }}</div>
        </div>
        <el-button type="text">修改</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const userInfo = ref({
  username: 'admin',
  email: 'admin@example.com',
  phone: '13800138000',
  role: '管理员',
  registerTime: '2023-01-01',
  avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
})

const saveProfile = () => {
  // 保存个人信息逻辑
  console.log('保存个人信息', userInfo.value)
}
</script>

<style lang="scss" scoped>
.account-container {
  padding: 20px;
  
  .profile-card {
    margin-bottom: 20px;
    
    .profile-content {
      display: flex;
      
      .avatar-container {
        width: 200px;
        text-align: center;
        
        .upload-btn {
          margin-top: 15px;
        }
      }
      
      .profile-form {
        flex: 1;
        max-width: 500px;
      }
    }
  }
  
  .security-card {
    .security-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid #ebeef5;
      
      .security-info {
        .security-title {
          font-weight: bold;
          margin-bottom: 5px;
        }
        
        .security-desc {
          color: #606266;
          font-size: 14px;
        }
      }
      
      &:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>